<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <span></span>
        <a-button type="primary" @click="addDesk">新建</a-button>
      </div>
      <a-table
        ref="tableList"
        @mouseleave.native="onMouseLeaveTable"
        :columns="columns"
        :data-source="dataSource"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        :loading="loading"
        :customRow="
          (record, index) => {
            return {
              on: {
                mouseenter: (e) => {
                  this.currentRowId = record.id
                },
              },
            }
          }
        "
      >
        <!-- 时间 -->
        <template slot="created_at" slot-scope="text">
          <span> {{ text > 0 ? $moment(text * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
        </template>

        <!-- 操作 -->
        <span class="table-action" slot="action" slot-scope="text, goods">
          <a @click="onEdit(goods)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="showQscode(goods)">二维码</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="delDesk(goods)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </a-card>

    <!-- 新建桌号 -->
    <cyyModal
      :visible="showAddDesk"
      :title="deskInfo.id ? '编辑' : '新建'"
      okText="确认"
      cancelText="取消"
      @handleCancel="onCancel"
      @handleOk="onOk"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="桌号">
          <a-input v-model="deskInfo.num"></a-input>
        </a-form-item>
        <a-form-item label="备注">
          <a-input v-model="deskInfo.remark"></a-input>
        </a-form-item>
      </a-form>
    </cyyModal>

    <!-- 二维码弹框 -->
    <cyyModal
      :visible="showQrcodeModal"
      title="二维码"
      okText="确认"
      cancelText="取消"
      @handleCancel="showQrcodeModal = !showQrcodeModal"
      @handleOk="showQrcodeModal = !showQrcodeModal"
    >
      <a-spin v-if="loading" />
      <div class="pop">
        <img style="width: 150px; margin: 5px" class="img" v-for="(item, index) of qrcode" :src="item" alt="" />
      </div>
    </cyyModal>
  </page-header-wrapper>
</template>

<script>
import { cyyModal } from '@/components/CyyUi/index'
import { getOrderDesk, getOrderAddDesk, deleteOrderDesk, getOrderDeskQrcode, orderDeskEdit } from '@/api/orderMeal'

export default {
  name: '',
  components: {
    cyyModal,
  },
  data() {
    return {
      activeTab: '2',
      loading: false,
      tabs: [
        {
          value: '0',
          text: '商品管理',
          path: 'FoodGoods',
        },
        {
          value: '1',
          text: '分类',
          path: 'FoodCat',
        },
        {
          value: '2',
          text: '餐桌管理',
          path: 'FoodTableNumber',
        },
        {
          value: '3',
          text: '设置',
          path: 'FoodSetting',
        },
        {
          value: '4',
          text: '店铺点餐二维码',
          path: 'FoodQrcode',
        },
        {
          value: '5',
          text: '轮播图',
          path: 'FoodSwiper',
        },
      ],
      columns: [
        {
          title: '座号',
          dataIndex: 'num',
          key: 'num',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
        {
          title: '时间',
          dataIndex: 'created_at',
          key: 'created_at',
          scopedSlots: { customRender: 'created_at' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [],
      selectedRowKeys: [],
      totalCount: 0,
      pageSize: 10,
      pageNo: 1,
      loading: false,
      currentRowId: '',
      showAddDesk: false,
      form: this.$form.createForm(),
      deskInfo: {},
      showQrcodeModal: false,
      qrcode: [],
    }
  },
  watch: {},
  created() {},
  computed: {},
  filters: {},
  mounted() {
    this.getOrderDesk()
  },
  methods: {
    getOrderDesk() {
      getOrderDesk({ pageNo: this.pageNo, pageSize: this.pageSize, md_id: -1 }).then((res) => {
        console.log(res)
        if (!res.code) {
          this.dataSource = res.data.data
          this.totalCount = res.data.totalCount
        }
      })
    },
    // tab切换
    tabChange(e) {
      console.log(e)
      console.log(this.tabs[e])
      if (e == 2) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    // 鼠标滑出表格
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },
    // 表格选中
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    // 分页请求
    tablePageChange(e) {
      this.pageNo = e
      this.getOrderDesk()
    },
    // 分页器页数修改回调
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getOrderDesk()
    },
    // 点击编辑
    onEdit(item) {
      this.showAddDesk = true
      this.deskInfo = item
    },
    // 新建
    addDesk() {
      this.deskInfo = {}
      this.showAddDesk = true
    },
    onCancel() {
      this.showAddDesk = false
      this.deskInfo = {}
    },
    onOk() {
      console.log(this.deskInfo)
      if (!this.deskInfo.num) {
        this.$message.error('请填写桌号！')
        return
      }
      if (this.deskInfo?.id) {
        orderDeskEdit(this.deskInfo).then((res) => {
          if (!res.code) {
            this.showAddDesk = false
            this.$message.success('修改成功！')
          }
        })
      } else {
        this.requestAddDesk(() => {
          this.$message.success('添加成功！')
          this.getOrderDesk()
        })
      }
    },
    requestAddDesk(cb) {
      getOrderAddDesk(this.deskInfo, true).then((res) => {
        console.log(res)
        if (!res.code) {
          cb && cb()
          this.showAddDesk = false
          this.deskInfo = {}
        }
      })
    },
    showQscode(item) {
      this.loading = true
      getOrderDeskQrcode({ num: item.num, md_id: -1 })
        .then((res) => {
          this.loading = false
          if (!res.code) {
            this.showQrcodeModal = true
            this.qrcode = res.data || []
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 删除
    delDesk(item) {
      deleteOrderDesk({ id: item.id }).then((res) => {
        if (!res.code) {
          this.$message.success('删除成功！')
          this.getOrderDesk()
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.pop {
  text-align: center;
}
</style>
